<template>
  <div>
    <n-card :bordered="false" class="proCard">
      <n-form
        :label-width="120"
        :model="formValue"
        :rules="rules"
        label-placement="left"
        ref="formRef"
        class="py-8"
      >
        <n-grid cols="3" responsive="screen">
          <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
            <n-form-item label="当前项目" path="name">
              <n-input v-model:value="formValue.name" placeholder="姓名" />
            </n-form-item>
            <n-form-item label="姓名" path="name">
              <n-input v-model:value="formValue.name" placeholder="姓名" />
            </n-form-item>
            <n-form-item label="照片" path="mobile">
              <n-input placeholder="照片" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="性别" path="name">
              <n-input v-model:value="formValue.name" placeholder="性别" />
            </n-form-item>
            <n-form-item label="工种" path="mobile">
              <n-input placeholder="工种" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="联系电话" path="name">
              <n-input v-model:value="formValue.name" placeholder="联系电话" />
            </n-form-item>
            <n-form-item label="联系地址" path="mobile">
              <n-input placeholder="联系地址" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="身份证号码" path="mobile">
              <n-input placeholder="身份证号码" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="家庭住址" path="mobile">
              <n-input placeholder="家庭住址" v-model:value="formValue.mobile" />
            </n-form-item>
          </n-grid-item>
          <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
            <n-form-item label="出入证编号" path="mobile">
              <n-input placeholder="出入证编号" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="出生日期" path="mobile">
              <n-date-picker
                type="datetime"
                v-model:value="formValue.datetime"
                style="width: 100%"
              />
            </n-form-item>
            <n-form-item label="民族" path="mobile">
              <n-input placeholder="民族" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="施工班组名称" path="mobile">
              <n-input placeholder="施工班组名称" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="联系电话" path="mobile">
              <n-input placeholder="联系电话" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="现场带班姓名" path="mobile">
              <n-input placeholder="现场带班姓名" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="入场时间" path="mobile">
              <n-input placeholder="入场时间" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="所在劳务公司" path="mobile">
              <n-input placeholder="所在劳务公司" v-model:value="formValue.mobile" />
            </n-form-item>
          </n-grid-item>
          <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
            <n-form-item label="用工形式" path="mobile">
              <n-input placeholder="用工形式" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="紧急联系人" path="mobile">
              <n-input placeholder="紧急联系人" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="联系电话" path="mobile">
              <n-input placeholder="联系电话" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="本人微信号" path="mobile">
              <n-input placeholder="本人微信号" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="支付宝账号" path="mobile">
              <n-input placeholder="本人支付宝账号" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="银行名称" path="mobile">
              <n-input placeholder="银行名称" v-model:value="formValue.mobile" />
            </n-form-item>
            <n-form-item label="卡号" path="remark">
              <n-input v-model:value="formValue.remark" placeholder="卡号" />
            </n-form-item>
            <n-form-item label="进场安全教育" path="remark">
              <n-input v-model:value="formValue.remark" placeholder="进场安全教育" />
            </n-form-item>
          </n-grid-item>
        </n-grid>
      </n-form>
    </n-card>
    <div style="text-align: center; width: 100%">
      <n-button type="primary" @click="formSubmit">提交</n-button>
      <n-button @click="resetForm">重置</n-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref, reactive } from 'vue';
  import { useMessage } from 'naive-ui';

  const rules = {
    name: {
      required: true,
      message: '请输入预约姓名',
      trigger: 'blur',
    },
    remark: {
      required: true,
      message: '请输入预约备注',
      trigger: 'blur',
    },
    mobile: {
      required: true,
      message: '请输入预约电话号码',
      trigger: ['input'],
    },
    datetime: {
      required: true,
      type: 'number',
      message: '请选择预约时间',
      trigger: ['blur', 'change'],
    },
    doctor: {
      required: true,
      type: 'number',
      message: '请选择预约医生',
      trigger: 'change',
    },
  };

  const formRef: any = ref(null);
  const message = useMessage();

  const defaultValueRef = () => ({
    name: '',
    mobile: '',
    remark: '',
    sex: 1,
    matter: null,
    doctor: null,
    datetime: [],
  });

  let formValue = reactive(defaultValueRef());
  function formSubmit() {
    formRef.value.validate((errors) => {
      if (!errors) {
        message.success('验证成功');
      } else {
        message.error('验证失败，请填写完整信息');
      }
    });
  }

  function resetForm() {
    formRef.value.restoreValidation();
    formValue = Object.assign(unref(formValue), defaultValueRef());
  }
</script>
